<template>
  <div class="vue-box" style="display: none;" :style="'display: block;'">
    <div class="c-panel">
      <el-dialog v-bind="$attrs"
                 :visible.sync="dialogVisible"
                 :append-to-body="true"
                 top="8vh"
                 :close-on-click-modal="false"
                 v-on="$listeners" @open="onOpen" @close="onClose" :title="dialogTitle">
        <el-row :gutter="15">
          <el-form ref="elForm" :model="formData" :rules="rules" size="small" label-width="100px">
            <el-col :span="24">
              <el-form-item label="表达式" prop="expression">
                <el-input v-model="formData.expression" placeholder="请输入表达式" :maxlength="20" show-word-limit
                          clearable :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="描述" prop="desc">
                <el-input v-model="formData.desc" placeholder="请输入表达式描述" :maxlength="200" show-word-limit
                          clearable :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>

          </el-form>
        </el-row>
        <div slot="footer">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="handelConfirm">确定</el-button>
        </div>
      </el-dialog>
      <!-- ------------- 检索参数 ------------- -->
      <div class="c-title">常用cron表达式维护（维护过后再新增任务时可以显示输入建议）</div>
      <!-- ------------- 快捷按钮 ------------- -->
      <el-row :gutter="15">
        <el-col :span="24">
          <el-button type="primary" icon="el-icon-plus" @click="dialogVisible = true;dialogTitle='新增表达式'">
            新增
          </el-button>
          <div class="c-item">
            <el-input
                placeholder="输入关键字进行过滤"
                v-model="p.desc"
                clearable>
            </el-input>
          </div>
          <el-button type="info" icon="el-icon-refresh" @click="sa.f5Tab()">重置</el-button>
          <el-table
              :border="true"
              resizable
              ref="userTable"
              :data="tableData"
              style="width: 100%"
              highlight-current-row>
            <el-table-column type="selection" width="40" align="center"></el-table-column>
            <el-table-column
                prop="expression"
                width="140"
                label="表达式">
            </el-table-column>
            <el-table-column
                prop="desc"
                min-width="120"
                label="说明">
            </el-table-column>
            <el-table-column
                width="120"
                label="操作">
              <template slot-scope="scope">
                <el-button
                    @click.native.prevent="edit(scope.row.id)"
                    type="text">
                  编辑
                </el-button>
                <el-popconfirm
                    title="确认移除？移除后无法恢复！！"
                    @confirm="del(scope.row.id)"
                >
                  <el-button
                      slot="reference"
                      type="text">
                    移除
                  </el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <div class="page-box">
            <el-pagination background
                           layout="total, prev, pager, next, sizes, jumper"
                           :current-page.sync="p.current"
                           :page-size.sync="p.size"
                           :total="p.total"
                           :page-sizes="[10, 20, 30, 40, 50, 100]"
                           @current-change="f5()"
                           @size-change="f5()">
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
let PATH = "/task/cron"
module.exports = {
  components: {},
  watch: {
    'p.desc': function (val) {
      this.f5()
    }
  },
  data() {
    return {
      tableData: [],
      p: {
        desc: '',
        current: 1,
        size: 10,
        total: -1
      },
      showData: {
        expression: undefined,
        desc: undefined,
      },
      formData: {
        expression: undefined,
        desc: undefined,
      },
      dialogVisible: false,
      dialogTitle: '',
      rules: {
        expression: [{
          required: true,
          message: '请输入表达式',
          trigger: 'blur'
        }],
        desc: [],
      },
    }
  },
  methods: {
    edit(id) {
      sa.ajax(PATH + "/get", {id: id}, (res) => {
        this.formData = res.data
        this.dialogVisible  = true
      }, {type: 'get', msg: null})
    },
    del(id) {
      sa.ajax(PATH + "/del", {id: id}, (res) => {
        sa.alert(res.msg, () => {
          this.f5()
        })
      }, {})
    },
    onClose() {
      this.formData = {
        expression: undefined,
        desc: undefined,
      }
      this.$refs['elForm'].resetFields()
    },
    onOpen() {
    },
    close() {

      this.dialogVisible = false
    },
    show(id) {
      sa.ajax(PATH + "/get", {id: id}, (res) => {
        this.showData = res.data
      }, {type: 'get', msg: null})
    },
    handelConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        sa.ajax(PATH + "/save-or-update", this.formData, (res) => {
          sa.alert(res.msg, () => {
            this.dialogVisible = false;
            this.f5();
          })
        }, {})
      })
    },
    f5() {
      sa.ajax(PATH + "/list", this.p, (res) => {
        this.tableData = res.data;
        this.p.total = res.dataCount
      }, {type: 'get'})
    }
  },
  mounted() {
  },
  created() {
    this.f5()
  }
}
</script>

<style scoped>
</style>
